<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯dom渲染</title>
</head>
<body>
<ul id="ul">

</ul>
<script>
    let ulElement = document.getElementById("ul");
    let persons = [
        {"name": "小明", "age": 12, "sex": "男"},
        {"name": "小黄", "age": 15, "sex": "女"},
        {"name": "小黑", "age": 452, "sex": "女"}
    ]
    for (let person of persons) {
        //取出value
        let name = person.name;
        //开始做节点
        let liElement = document.createElement("li");
        let divup = document.createElement("div");
        let divdown = document.createElement("div");
        //开始填充数据
        //divup内容填充
        let innerText = "的基本信息";
        divup.className = "hd";
        divup.innerText = name + innerText;
        //divdown填充
        divdown.className = "bd";
        //循环往divdown插入p节点
        for (let personKey in person) {
            //填充p节点内容
            let pElement = document.createElement("p");
            pElement.innerText = personKey.toString() + "：" + person[personKey];
            //插入至divdown
            divdown.appendChild(pElement);
        }
        //插入节点
        liElement.appendChild(divup);
        liElement.appendChild(divdown);
        //开始填充至ul中
        ulElement.appendChild(liElement)
    }
</script>
</body>
</html>